<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
         <el-form-item label="影院名称" prop="cinemaName">
            <el-input v-model="queryParams.cinemaName" placeholder="请输入" clearable style="width: 200px"
               @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item label="电影名称" prop="movieName">
            <el-input v-model="queryParams.movieName" placeholder="请输入" clearable style="width: 200px"
               @keyup.enter="handleQuery" />
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>
      
      <el-table v-loading="loading" :data="movieList" @selection-change="handleSelectionChange">
         <el-table-column label="序号" prop="movieId" width="100" align="center"  />
         <el-table-column label="城市" prop="cinema.cinemaCity" align="center" />
         <el-table-column label="影院名称" prop="cinema.cinemaName" align="center" />
         <el-table-column label="电影名称" prop="movieName" align="center"   />
         <el-table-column label="演员" width="220" prop="moviePerformer" align="center" />
         <el-table-column label="时长" prop="movieLength" align="center" />
         <el-table-column label="类型" prop="movieType" align="center" />
         <el-table-column label="上映时间" prop="movieTime" align="center" />
         <el-table-column label="评分" prop="movieScore" align="center" />
         <el-table-column label="简介" width="300" prop="movieInfo" align="center" />
         <el-table-column label="影院地址" prop="cinema.cinemaAddress" align="center" />
      </el-table>

      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize" @pagination="queryMoviePageList" />
   </div>
</template>

<script setup name="apitest1">
import { queryMoviePageByCinemaId } from "@/api/apitest/movie";

const { proxy } = getCurrentInstance();
const { sys_notice_status, sys_notice_type } = proxy.useDict("sys_notice_status", "sys_notice_type");

const route = useRoute();

const movieList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);

const data = reactive({
   /* form: {}, */
   queryParams: {
      pageNum: 1,
      pageSize: 10,
      cinemaId: route.query.cinemaId,
   },
   /* rules: {
      noticeTitle: [{ required: true, message: "公告标题不能为空", trigger: "blur" }],
      noticeType: [{ required: true, message: "公告类型不能为空", trigger: "change" }]
   }, */
});

const { queryParams, form, rules } = toRefs(data);

/** 搜索按钮操作 */
function handleQuery() {
   queryParams.value.pageNum = 1;
   queryMoviePageList();
}

/** 重置按钮操作 */
function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
}

// 分页查询影院
const queryMoviePageList = () => {
   loading.value = true;

   queryMoviePageByCinemaId(queryParams.value).then(response => {
      loading.value = false;

      movieList.value = response.rows;
      total.value = response.total;
      loading.value = false;
   })
}

queryMoviePageList();
</script>
